<template>
  <div class="Header">
    <div class="nav-top clearfix">
      <div class="logo fl">
        <!-- <div class="logo-img" @click="goPage('Home')"></div> -->
        <span class="name" @click="goPage('Home')">{{title}}</span>
        <span class="location">广州</span>
      </div>
      <div class="nav fr clearfix">
        <div class="nav-left fl">
          <ul class="clearfix">
            <slot></slot>
            <li v-for="(item, index) of navData" :key="index" @click="goPage(item.name)">
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="nav-right fr">
          <div class="unlogin" v-if="!isLogin">
            <span @click="goPage('Login')">登录 </span>|
            <span @click="goPage('Register')"> 注册</span>
          </div>

          <div class="logined" v-else>
            <div class="user-name">
              <span @click="goPage('Personal')">{{$cookies.get('__un')}}</span>
            </div>
            <div class="exit">
              <span @click="loginout">退出</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "Header",
  props: ['nav', 'isLogin', 'title'],
  data() {
    return {
      isActive: 'Home',
      navData: [
        { title: "二手房", name: "Second-handHouse" },
        // { title: "租房", name: "Renting"},
        { title: "小区", name: "Estate"},
        // { title: "学校", name: "School"},
        { title: "经纪人", name: "Agent" },
        { title: "卖房", name: "SellingHouse" },
        // { title: "指南", name: "Guide"},
        // { title: "关于", name: "About"},
      ],

      // 是否登录
      // isLogin: this.isLogin,

      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      userInfo: {
        avatar: "",
        userName: "",
      },
    };
  },

  created() {
    // console.log('isLogin==>',this.isLogin)
    // console.log('isLogin==>',this.isLogin)
    // console.log(this.$root.areaData)
    // if(this.$cookies.get("__tk")){
    //   this.isLogin = true;
    //   this.getUserInfo();
    // }else{
    //   this.isLogin = false;
    // }
  },
  mounted(){
    // console.log('isLogin==>',this.isLogin)
    // console.log('isLogin==>',this.isLogin)
    // if(this.$cookies.get("__tk")){
    //   this.isLogin = true;
    //   this.getUserInfo();
    // }else{
    //   this.isLogin = false;
    // }
  },

  methods: {
    goPage(n) {
      this.$router.push({ name: n });
    },

    //退出登录
    loginout() {
      //清除cookie
      this.$cookies.keys().map((cookieName) => {
        this.$cookies.remove(cookieName);
      });
      this.isLogin = false;
      this.$message.success('退出成功')

      this.$router.push({ name: "Home" });
      // this.$router.go(0);
      this.reload();
    },

    //获取用户信息
    getUserInfo() {
      this.axios({
        method: "GET",
        url: this.baseUrl + "/getUserInfo",
        params: {
          userId: this.$cookies.get('__ui')
        }
      })
        .then((res) => {
          console.log("res ==> ", res);

          if (res.data.code == 1034) {
            this.isLogin = false;
          }

          if (res.data.code == 1040) {
            // this.isLogin = true;
            // this.userInfo.avatar = res.data.data.url + res.data.data.result[0].avatar;
            this.userInfo.userName = res.data.data.result[0].userName;
          } else {
            // this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/less/variable.less";
.Header {
  width: 100%;
  background-color: @theme;

  .nav-top {
    width: 1200px;
    margin: 0 auto;

    .logo {
      height: 60px;

      .logo-img {
        width: 60px;
        height: 60px;
        background-color: #000;
        float: left;
        cursor: pointer;
      }

      .name {
        font-size: 50px;
        height: 100%;
        float: left;
        line-height: 60px;
        font-weight: bold;
        color: #fff;
        margin: 0 10px;
        font-family: "隶书";
        cursor: pointer;
      }

      .location {
        background-color: rgba(0, 0, 0, 0.3);
        display: inline-block;
        width: 44px;
        height: 20px;
        position: relative;
        top: calc(~"50% - 10px");
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
        align-self: center;
        color: #fff;
        cursor: pointer;
        &:hover {
          color: @theme;
        }
      }
    }

    .nav {
      ul li {
        float: left;
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        &:hover {
          background-color: rgb(0, 142, 85);
        }
        &.active{
          background-color: rgb(0, 142, 85);
        }
      }

      .nav-right {
        height: 60px;
        width: 150px;
        text-align: center;
        line-height: 60px;
        font-size: 14px;

        .unlogin {
          text-align: center;
          span {
            cursor: pointer;
            font-size: 14px;
            color: #fff;
          }
        }

        .logined {
          display: flex;
          color: #fff;

          .user-name {
            flex: 75%;
            span {
              cursor: pointer;
            }
          }
          .exit {
            flex: 25%;

            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>